<template>
    <div class="addButtonWrap">
        <div>
            <template v-if="!id">
                <a-tooltip :title="tooltipTitleFormat">
                    <a-button type="primary" @click="handClick" :disabled="tooltipTitleFormat != ''">新增</a-button>
                </a-tooltip>
            </template>
            <template v-else>
                <a-tooltip title="编辑">
                    <a-button @click="handClick" type="link" size="small">
                        <Icons class="iconButton" type="edit" />
                    </a-button>
                </a-tooltip>
            </template>
        </div>
        <!-- <a-modal :visible="visible" :title="id ? '编辑' : '新增'" @cancal="cancal"></a-modal> -->
        <a-drawer :visible="visible" :title="id ? '编辑' : '新增'" placement="right" :closable="true" @close="onClose"
            :width="600">
            <div class="drawContWrap">
                <a-spin :spinning="loading.getLoading" class="spinWrap">
                    <a-form :form="form">
                        <a-row>
                            <a-col :span="item.colSpan" v-for="item in formData" :key="item.dataIndex">
                                <FormItem :formVal="formVal" :formData="formData" :item="item" :form="form">
                                </FormItem>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-spin>
            </div>
            <div :style="{
                position: 'absolute',
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e8e8e8',
                padding: '10px 16px',
                textAlign: 'right',
                left: 0,
                background: '#fff',
                borderRadius: '0 0 4px 4px',
            }">
                <a-space>
                    <a-button @click="onClose"> 取消 </a-button>
                    <a-button type="primary" @click="onClickSave" :loading="loading.saveLoading">
                        保存
                    </a-button>
                </a-space>
            </div>
        </a-drawer>
    </div>
</template>

<script>
import FormItem from '@/views/manage/components/FormItem';
import { staticFormData } from './staticData';
import { formDataMatter } from "@/views/manage/components/js/js";
import Icons from "../../components/Icons.vue";

export default {
    name: 'AddButton',
    components: {
        FormItem,
        Icons,
    },
    props: {
        id: {
            type: [String, Number],
        },
        otherData: {
            type: Object,
        },
        onRefresh: {
            type: Function,
        }
    },
    data() {
        return {
            visible: false,
            loading: {
                getLoading: false,
                saveLoading: false,
            },
            form: null,
            formData: staticFormData,
            formVal: {},
        }
    },
    mounted() {
    },
    created() {
        this.form = this.$form.createForm(this, {
            name: "advanced_search",
            onValuesChange: this.onValuesChange,
        });
    },
    methods: {
        handClick() {
            this.visible = true;
            if (this.id) {
                this.getFormData();
            } else {
                this.$nextTick(() => {
                    this.form.setFieldsValue({
                        company: this.otherData.company,
                    });
                })
            }
        },
        onClose() {
            this.visible = false;
            this.loading = {
                getLoading: false,
                saveLoading: false,
            }
        },
        onClickSave() {
            this.form.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    let tempVal = formDataMatter("out", values, this.formData);
                    let params = {
                        ...tempVal,
                    };
                    let url = this.$addProcessReminder;
                    if (!url) {
                        return;
                    }
                    this.loading = {
                        ...this.loading,
                        saveLoading: true,
                    };
                    this.postAxios(url, params)
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message.success({
                                    content: res.msg || res.data,
                                    duration: 2.5,
                                });
                                this.onRefresh();
                                this.visible = false;
                            } else {
                                this.$message.error(res.msg || "操作失败,请稍后再试");
                            }
                        })
                        .catch(() => { })
                        .finally(() => {
                            this.loading = {
                                ...this.loading,
                                saveLoading: false,
                            };
                        });
                }
            });
        },
        onValuesChange(props, values, formV) {
            this.formVal = formV;
        },
        getFormData() {
            let params = {
                id: this.id,
            };
            this.loading['getLoading'] = true;
            this.getAxios(this.$getProcessReminder, params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$nextTick(() => {
                            this.form.setFieldsValue({
                                ...res.data,
                                // 后端返回的公司id不对
                                company: this.otherData.company,
                            });
                        })
                    }
                })
                .catch(() => { })
                .finally(() => {
                    this.loading['getLoading'] = false;
                });
        }
    },
    computed: {
        tooltipTitleFormat() {
            let res = '';
            if (!this.id && (!Object.keys(this.otherData).includes('company') || this.otherData['company'] == '')) {
                res = '请选择公司'
            }
            return res;
        }
    },
    watch: {
        visible: {
            handler(nVal, oVal) {
                if (!nVal) {
                    this.formVal = {};
                    this.form.resetFields();
                }
            },
        },
    }
}
</script>

<style lang="less" scoped>
.addButtonWrap {}

.drawContWrap {
    height: calc(100vh - 55px - 53px - 16px);
    overflow-x: hidden;
    overflow-y: auto;

    .spinWrap {
        width: 100%;
        height: 100%;
    }
}
</style>